<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>农技视频编辑</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">

    <link href="../css/mui/mui.css" rel="stylesheet">
    <link href="../css/mui/icons-extra.css" rel="stylesheet">
    <link href="../css/mui/mui.picker.min.css" rel="stylesheet">
    <link href="../css/mui/mui.poppicker.css" rel="stylesheet">
</head>

<body>
    <!-- header -->
    <div class="margin-b-60">
        <div class="widget-default trade-list" onclick="selectVideo()">
            <div class="position-open1">
                <img class="open-img" src="../img/open.png" alt="">
            </div>
            <div class='height177 width-100'>
                <img class='height177 width-100' src="" alt="" id="imgSP">
            </div>

        </div>
        <div class="list-group patient-list1 margin-b-i10">
            <div class="list-cell text-cell list-cell1" onclick="selectType()">
                <div class="web-box1 list-left">标签</div>
                <div class="web-box2 nk-s text-right list-right">
                    <div class="display-flex align-items-center justify-content-center">
                        <input type="text" placeholder="请选择标签" id="tag" disabled>
                        <!-- <span>请选择标签</span> -->
                        <img class="sele-icon" src="../img/next.png" />
                    </div>
                </div>
            </div>
            <div class="list-cell text-cell list-cell1">
                <div class="web-box1 list-left">标题</div>
                <div class="web-box2 nk-s text-right list-right"><input type="text" placeholder="请输入标题" id="title">
                </div>
            </div>
        </div>
        <div class="list-group patient-list1 margin-b-i10" style="display: none;" id="price-div">
            <div class="price-diff">
                <div class="list-cell text-cell" onclick="selectPrice()">
                    <div class="web-box1 list-left">费用设置</div>
                    <div class="web-box2 nk-s text-right list-right display-flex">
                        <input type="number" placeholder="请输入金额" id="costAmount" value="0" disabled>
                        <span class="padding-l-5 font-15 black">元</span>
                    </div>

                </div>
                <p class="no-margin margin-t-f5 padding-b-10">默认为0元，即免费，收费可设置5~30元之间的整数值</p>
            </div>
        </div>
        <div class="widget-default widget-body margin-b-10" id="info-div">

            <div class="web-box1 list-left font-15 black">简介</div>
            <div class="list-right">
                <textarea class="no-margin info-textarea" type="text" placeholder="简单介绍一下你的视频吧！"
                    id="introduction"></textarea>
            </div>

        </div>

        <div class="widget-default widget-body">
            <div class="web-box1 list-left padding-b-10 font-15 black">上传封面</div>
            <div class="list-right" onclick="selectImg()">
                <img class="ser-img1" src="../img/add-img.png" alt="" id="imgFM">
            </div>

        </div>

    </div>
    <div class="save-btn hobby-footer1" onclick="submit()">
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block bc-head">发布</button>
    </div>

    <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell" onclick="sheetType(1)">
                <a href="#">拍照</a>
            </li>
            <li class="mui-table-view-cell" onclick="sheetType(2)">
                <a href="#">选择视频</a>
            </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="#sheet1"><b>取消</b></a>
            </li>
        </ul>
    </div>

    <script src="../js/jquery.js"></script>
    <script src="../js/mui/mui.js"></script>
    <script src="../js/mui/mui.picker.min.js"></script>
    <script src="../js/mui/mui.poppicker.js"></script>
    <script src="../js/layer.js"></script>

    <script src="../js/app/app-base.js"></script>
    <script src="../js/app/app-url.js"></script>
    <script src="../js/app/app-ajax.js"></script>
    <script src="../js/dsbridge.js"></script>

    <script>
        var id = localStorage.getItem("video-id"); //农业视频id(修改时必传)
        var type = localStorage.getItem("video-type"); //视频类型 AGRT_TECH_VIDEO-农技视频 SMALL_VIDEO-小视频
        var coverImg = ""; //封面图
        var labelTypeCode = ""; //三级分类code
        var costAmount = "0"; //费用
        var videoId = ""; //视频videoId
        var videoName = ""; //视频videoName
        var picker = new mui.PopPicker({
            layer: 3
        });

        var pickerPrice = new mui.PopPicker();

        $(document).ready(function () {
            var data = {}
            getServerData(url_getSignature, data);
            getServerData(url_getVideoType, data);

            var arr = new Array();
            arr.push({
                text: "0"
            });
            for (var i = 5; i < 31; i++) {
                arr.push({
                    text: i + ""
                });
            }
            pickerPrice.setData(arr);


            if (type == "AGRT_TECH_VIDEO") {
                $("#price-div").show();
            } else {
                $("#price-div").hide();
                $("#info-div").hide();
            }

            if (!isEmpty(id)) {
                var data = {
                    id: id,
                    userAccId: getUserId()
                }
                getServerData(url_agrivideoInfo_queryDetail, data);
            }
        });

        //设置封面
        dsBridge.register("setImg", function (img) {
            coverImg = img;
            $("#imgFM").attr("src", showSmallImg(img));
        });

        //设置视频
        dsBridge.register("setVideo", function (img, name) {
            $("#imgSP").attr("src", img);
            videoName = name;
        });
        dsBridge.register("setVideoID", function (id) {
            videoId = id;
            uploadFinish();
        });

        function getServerDataSuccess(url, data) {
            switch (url) {
                //获取签名
                case url_getSignature:
                    dsBridge.call("setSignature", data.data);
                    break;
                case url_getVideoType:
                    //三级分类
                    picker.setData(data.data);
                    break;
                case url_agrivideoInfo_save:

                    dsBridge.call("save");
                    showAlertClose("发布成功，视频转码完成后即可展示，请耐心等待。");
                    break;
                case url_agrivideoInfo_queryDetail:
                    //视频详情
                    setView(data.data);
                    break;
            }
        }

        function setView(data) {
            log(toJson(data))
            videoId = data.videoId;
            videoName = data.videoName;
            coverImg = data.coverImg;
            labelTypeCode = data.labelType.code;
            $("#imgFM").attr("src", showSmallImg(coverImg));
            $("#imgSP").attr("src", showSmallImg(coverImg));
            $("#tag").val(data.labelType.name);
            $("#title").val(data.title);
            $("#costAmount").val(data.costAmount);
            $("#introduction").val(data.introduction)
        }


        //选择图片
        function selectImg() {
            dsBridge.call("selectImg");
        }

        //选择视频
        function selectVideo() {
            //修改不支持上传视频
            if (isEmpty(id))
                mui('#sheet1').popover('toggle');
        }

        function sheetType(t) {
            if (t == 1) {
                dsBridge.call("selectCamera", type);
            } else {
                dsBridge.call("selectVideo", type);
            }
            mui('#sheet1').popover('toggle');
        }

        //发布
        function submit() {


            if (isEmpty(id) && isEmpty(videoName)) {
                showToast("请选择视频");
                return;
            }

            if (isEmpty(labelTypeCode)) {
                showToast("请选择分类");
                return;
            }

            if (isEmpty($("#title").val())) {
                showToast("请填写标题");
                return;
            }

            if (isEmpty(coverImg)) {
                showToast("请上传封面");
                return;
            }


            if (!isEmpty(id)) {
                uploadFinish();
            } else {
                dsBridge.call("upload");
            }
        }

        //视频上传完成
        function uploadFinish() {

            var data = {
                id: id,
                userAccId: getUserId(),
                type: type,
                coverImg: coverImg,
                title: $("#title").val(),
                introduction: $("#introduction").val(),
                costAmount: $("#costAmount").val(),
                labelTypeCode: labelTypeCode,
                videoId: videoId,
                videoName: videoName
            }
            getServerData(url_agrivideoInfo_save, data);
        }

        function selectType() {
            picker.show(function (item) {
                var name = item[0].name + item[1].name + item[2].name;
                labelTypeCode = item[2].value;
                $("#tag").val(name);
            });
        }

        function selectPrice() {
            pickerPrice.show(function (item) {
                $("#costAmount").val(item[0].text);
            });
        }
    </script>

</body>

</html>